<template name="home">
  <view>
    <scroll-view>
      <!-- 轮播 -->
      <swiper
        class="screen-swiper square-dot"
        :indicator-dots="true"
        :circular="true"
        :autoplay="true"
        interval="5000"
        duration="500"
        :style="[{ animation: 'show 0.2s 1' }]"
      >
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image
            :src="item.url"
            mode="aspectFill"
            v-if="item.type == 'image'"
          ></image>
          <video
            :src="item.url"
            autoplay
            loop
            muted
            :show-play-btn="false"
            :controls="false"
            objectFit="cover"
            v-if="item.type == 'video'"
          ></video>
        </swiper-item>
      </swiper>

      <!-- WMS统计区域 -->
      <view class="wms-statistics-section" :style="[{ animation: 'show 0.4s 1' }]">
        <view class="cu-bar bg-white solid-bottom">
          <view class="action">
            <text class="cuIcon-title text-green"></text>WMS统计
          </view>
        </view>
        <view class="statistics-container">
          <WmsStatisticsCard 
            v-for="(card, index) in wmsStatistics" 
            :key="index"
            :data="card"
            @click="handleStatisticsClick"
          />
        </view>
      </view>

      <!-- 常用服务 -->
      <view
        class="cu-bar bg-white solid-bottom"
        :style="[{ animation: 'show 0.5s 1' }]"
      >
        <view class="action">
          <text class="cuIcon-title text-blue"></text>常用服务
        </view>
      </view>

      <view class="cu-list grid col-4 text-sm">
        <view
          class="cu-item animation-slide-bottom"
          :style="[{ animationDelay: (index + 1) * 0.05 + 's' }]"
          v-for="(item, index) in usList"
          :key="index"
          @tap="goPage(item.page)"
        >
          <view class="padding text-center">
            <image :src="item.icon" style="width: 28px; height: 28px">
              <view
                class="cu-tag badge margin-top-sm"
                style="margin-left: 1.2em"
                v-if="getTtemDotInfo(item)"
              >
                <block v-if="getTtemDotInfo(item)">{{
                  getTtemDotInfo(item)
                }}</block>
              </view>
            </image>
            <view class="margin-top-xs">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <!-- 其他服务 -->
      <view
        class="cu-bar bg-white solid-bottom margin-top"
        :style="[{ animation: 'show 0.6s 1' }]"
      >
        <view class="action">
          <text class="cuIcon-title text-yellow"></text>其他服务
        </view>
      </view>
      <view class="cu-list grid col-4 text-sm">
        <view
          class="cu-item animation-slide-bottom"
          :style="[{ animationDelay: (index + 1) * 0.1 + 's' }]"
          v-for="(item, index) in osList"
          :key="index"
          @tap="goPage(item.page)"
        >
          <view class="padding text-center">
            <image :src="item.icon" style="width: 28px; height: 28px" />
            <view class="margin-top-xs">{{ item.title }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="cu-tabbar-height margin-top"></view>
  </view>
</template>

<script>
import { us, os } from "@/common/util/work.js";
import socket from "@/common/js-sdk/socket/socket.js";
import WmsStatisticsCard from "@/components/wms/WmsStatisticsCard.vue";

export default {
  name: "home",
  components: {
    WmsStatisticsCard
  },
  props: {
    cur: String,
  },
  watch: {
    cur: {
      immediate: true,
      handler: function (val, oldVal) {
        console.log("cur", val, oldVal);
        this.initMenu();
      },
    },
  },
  data() {
    return {
      swiperList: [
        { id: 1, type: "image", url: "/static/banner/banner1.png", link: "" },
        { id: 2, type: "image", url: "/static/banner/banner2.jpg", link: "" },
        { id: 3, type: "image", url: "/static/banner/banner3.jpg", link: "" },
        { id: 4, type: "image", url: "/static/banner/banner4.jpg", link: "" },
      ],
      middleApps: [
        { icon: "line2_icon1.png", title: "审批", text: "个人审批" },
        { icon: "line2_icon2.png", title: "审批稿", text: "审批草稿箱" },
      ],
      usList: us.data,
      osList: os.data,
      msgCount: 0,
      dot: {
        mailHome: false,
      },
      wmsStatistics: [
        {
          icon: "📦",
          title: "库存概览",
          clickable: true,
          page: "wmsInventoryOverview",
          items: [
            { key: "total", label: "总库存", value: "12,580", alertClass: "normal" },
            { key: "lowStock", label: "低库存预警", value: "23", alertClass: "warning", alert: true, alertIcon: "⚠️" },
            { key: "outStock", label: "缺货商品", value: "5", alertClass: "danger", alert: true, alertIcon: "❗" }
          ]
        },
        {
          icon: "📊",
          title: "今日业务",
          clickable: true,
          page: "wmsTodayBusiness",
          items: [
            { key: "inbound", label: "入库单数", value: "28", alertClass: "success" },
            { key: "outbound", label: "出库单数", value: "35", alertClass: "success" },
            { key: "transfer", label: "调拨单数", value: "12", alertClass: "normal" }
          ]
        },
        {
          icon: "✅",
          title: "待办任务",
          clickable: true,
          page: "wmsTodoTasks",
          items: [
            { key: "pendingInbound", label: "待入库", value: "8", alertClass: "warning" },
            { key: "pendingOutbound", label: "待出库", value: "15", alertClass: "warning" },
            { key: "pendingCheck", label: "待盘点", value: "3", alertClass: "normal" }
          ]
        }
      ],
    };
  },
  methods: {
    initMenu() {
      console.log("-----------home------------");
      this.onSocketOpen();
      this.onSocketReceive();
      this.loadCount(0);
    },
    goPage(page) {
      if (!page) {
        return false;
      }
      if (page === "annotationList") {
        this.msgCount = 0;
      }
      this.dot[page] = false;
      this.$Router.push({ name: page });
    },
    handleStatisticsClick(cardData) {
      console.log("WMS统计卡片点击:", cardData);
      if (cardData.page) {
        uni.showToast({
          title: `跳转到${cardData.title}详情页`,
          icon: 'none'
        });
      }
    },
    // 启动webSocket
    onSocketOpen() {
      socket.init("websocket");
    },
    onSocketReceive() {
      var _this = this;
      socket.acceptMessage = function (res) {
        if (res.cmd == "topic") {
          //系统通知
          if (res.msgTxt) {
            _this.msgCount = res.msgTxt;
          }
        }
      };
    },
    loadCount(type) {
      let url = "/sys/annountCement/listByUser";
      this.$http.get(url).then((res) => {
        console.log("res::", res);
        if (res.data.success) {
          let msg1Count = res.data.result.anntMsgTotal;
          let msg2Count = res.data.result.sysMsgTotal;
          this.msgCount = msg1Count + msg2Count;
          console.log("this.msgCount", this.msgCount);
        }
      });
    },
    loadEmailCount() {
      this.dot.mailHome = true;
    },
    getTtemDotInfo(item) {
      if (item.page === "annotationList" && this.msgCount > 0) {
        return this.msgCount;
      }
      return "";
    },
  },
};
</script>

<style scoped>
.cu-list.grid > .cu-item {
  padding: 0px 0px;
}
.line2-icon {
  width: 60px;
  height: 60px;
}

/* WMS统计区域样式 */
.wms-statistics-section {
  margin-top: 32rpx;
}

.statistics-container {
  padding: 24rpx;
  background: #f5f5f5;
}
</style>
